<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			select {
				padding: 5px 16px;
				font-size: 26px;
			}
		</style>
		<script>
			function getCountry() {
				var select = document.getElementById("country");
				alert(select.value);
				// console.log(select.value);
			}
			
			var data = {
				"北京市": ["海淀区","朝阳区","丰台区"],
				"河北省": ["石家庄","唐山","秦皇岛"],
				"辽宁省": ["沈阳","大连","鞍山"],
				"山东省": ["青岛","济南","烟台"]
			}
			
			function selectCity() {
				//1、获取被选中的省份
				var provinceName = document.getElementById("province").value;
				// alert(provinceName);
				//2、根据省份获取对应的城市数组
				var cities = data[provinceName];
				console.log(cities);
				//3、
				var cityObject = document.getElementById("city");
				cityObject.innerHTML = "<option>--选择城市--</option>";
				// var cityOptionArray = cityObject.getElementsByTagName("option");
				// // alert(cityOptionArray);
				// for (var i = 0; i < cityOptionArray.length; i ++) {
				// 	cityObject.removeChild(cityOptionArray[i]);
				// }
				
				if (cities != undefined && cities != null) {//
					for (var j = 0; j < cities.length; j++) {
						var newOption = document.createElement("option");
						newOption.innerHTML = cities[j];
						cityObject.appendChild(newOption);
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="country" onchange="getCountry()"><!-- onchange是元素发生变化时，才会触发执行 -->
			<option value="none">--选择国家--</option>
			<option value="中国">中国</option>
			<option value="美国">美国</option>
			<option value="日本">日本</option>
		</select>
		<br /><br />
		<hr />
		<br />
		<br />
		<select id="province" onchange="selectCity()">
			<option value="none">--选择省份--</option>
			<option value ="北京市">北京市</option>
			<option value ="河北省">河北省</option>
			<option value ="辽宁省">辽宁省</option>
			<option value ="山东省">山东省</option>
		</select>
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</body>
</html>
